<%--
  Created by IntelliJ IDEA.
  User: 雷神
  Date: 2021/4/22
  Time: 15:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>

<head>
    <base href="<%=basePath%>"/>
    <title>襄阳蓝芯智能化办公系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="view/bootstrap-3.3.5/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="view/bootstrapvalidator/css/bootstrapValidator.css" />
    <script charset="utf-8" src="view/jquery/jquery-1.10.2.min.js"></script>
    <script charset="utf-8" src="view/bootstrap-3.3.5/js/bootstrap.js"></script>
    <script charset="utf-8" src="view/bootstrapvalidator/js/bootstrapValidator.js"></script>
</head>
<body>

<div class="panel panel-primary">
    <form action="zcgm/insertzcbj" id="myform" method="post"
          class="form-horizontal" role="form">
        <input type="hidden" name="oid" value="3">
        <table class="table table-bordered table-hover">
            <tbody>

            <tr class="thead-blue">
                <td colspan="4">购买明细(1)</td>
            </tr>
            <c:forEach items="${list}" var="mx">

            <tr>

                <td class="col-md-2"><label>资产名称</label></td>
                <input name="oid" type="hidden" value="${mx.oid}">
                <input name="parentid" type="hidden" value="${mx.parentid}">
                <td class="col-md-4">${mx.assetName} </td>
                <td class="col-md-2"><label>序列号</label></td>
                <td class="col-md-4">${mx.assetNumber}</td>
            </tr>
            <tr>
                <td><label>规格</label></td>
                <td>${mx.guige}</td>
                <td><label>购买数量</label></td>
                <td>${mx.shengou}</td>
            </tr>
            <tr>
                <td><label>单价</label></td>
                <td>${mx.unitPrice}</td>
                <td><label>采购时间</label></td>
                <td>${mx.purchaseDate} <button type="button" onclick="addBaojia(${mx.oid})" class="btn btn-success btn-xs">添加报价</button></td>
            </tr>

            <tr>
                <td id="baojia${mx.oid}" colspan="4">

                </td>
            </tr>
            </c:forEach>
            <tr>
                <td colspan="4" align="center">
                    <a type="button" href="javascript:history.back()" class="btn btn-info">返回</a>
                    <button type="button" id="subBaojia" class="btn btn-success">提交报价</button>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
</div>



<!-- 购买明细模板 -->
<div id="baojiademo" style="display: none;">
    <div>
        <div class="col-md-12">
            <div class="form-group col-md-5">
                <label  class="col-md-4 control-label">价格</label>
                <div class="col-md-8">
                    <input type="hidden" id="parentid" name="parentid" class="form-control">
                    <input type="text" name="price" class="form-control"
                           placeholder="请输入价格">
                </div>
            </div>
            <div class="form-group col-md-5">
                <label  class="col-md-4 control-label">联系人</label>
                <div class="col-md-8">
                    <input type="text" name="linkman" class="form-control"
                           placeholder="请输入联系人">
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group col-md-5">
                <label  class="col-md-4 control-label">联系人电话</label>
                <div class="col-md-8">
                    <input type="text" name="linkPhone" class="form-control"
                           placeholder="请输入联系人">
                </div>
            </div>
            <div class="form-group col-md-5">
                <label class="col-md-4 control-label">备注</label>
                <div class="col-md-8">
                    <input type="text" name="remark" class="form-control"
                           placeholder="请输入备注">
                </div>
            </div>
            <div class="form-group col-md-2">
                <input type="button" onclick="deteleBaojia(this)" class="btn btn-danger" value="删除此明细">
            </div>
        </div>

        <div class="col-md-12">
            <div class="form-group col-md-12">
                <hr>
            </div>
        </div>
    </div>
</div>


<!-- 模态框（Modal） -->
<div class="modal fade" id="alertMsgModal" tabindex="-1" role="dialog" aria-labelledby="alertMsgModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xs">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="alertMsgModalLabel">
                    提示
                </h4>
            </div>
            <div class="modal-body" id="alertmsg">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>






<script type="text/javascript">
    $(document).ajaxError(function(event,xhr) {
        if(xhr.status=="403"){//没有权限
            document.location.href = xhr.getResponseHeader("url");
        }else if(xhr.status!="200"){
            //alert("服务器错误!");
            console.log("服务器错误!");
        }
    });
</script>
</body>
<script type="text/javascript">

    $(document).ready(function() {

        $("#myform").bootstrapValidator({
            message : 'This value is not valid',
            feedbackIcons : {/*input状态样式图片*/
                valid : 'glyphicon glyphicon-ok',
                invalid : 'glyphicon glyphicon-remove',
                validating : 'glyphicon glyphicon-refresh'
            },
            submitHandler : function(validator,form, submitButton) {
                validator.defaultSubmit();
            }
        });

        $("#subBaojia").click(function() {
            $('#myform').data("bootstrapValidator").validate();
            if($('#myform').data("bootstrapValidator").isValid()){
                var size = $("input[name='parentid']").length;
                if(size>1){
                    $('#myform')[0].submit();
                }else{
                    $("#alertmsg").text("请添加报价再提交!");
                    $('#alertMsgModal').modal('show');
                }
            }
        });
    });

    function addBaojia(oid){
        $("#baojiademo #parentid").val(oid);
        $("#baojia"+oid).append($("#baojiademo").html());
        $('#myform').bootstrapValidator('addField', 'price', {
            validators: {
                notEmpty : {/*非空提示*/
                    message : '价格不能为空!'
                },
                regexp: {
                    regexp: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,
                    message: '价格格式不正确,金额必须大于0!'
                }
            }
        });
        $('#myform').bootstrapValidator('addField', 'linkman', {
            validators: {
                notEmpty : {/*非空提示*/
                    message : '联系人不能为空!'
                }
            }
        });
        $('#myform').bootstrapValidator('addField', 'linkPhone', {
            validators: {
                notEmpty : {/*非空提示*/
                    message : '联系人电话不能为空!'
                },
                regexp : {
                    regexp : /^(^(\d{3,4}-)?\d{7,8})$|^((1[0-9][0-9]\d{8}$))$/,
                    message : '电话格式不正确'
                }
            }
        });
    }
    function deteleBaojia(o){
        $(o).parent().parent().parent().remove();
    }
</script>
</html>